<template>
  <div>
    <van-nav-bar :border="false" title="烘焙圈" fixed>
      <template #left>
        <van-icon
          @click="showPopup"
          :name="require('../assets/baking_log/more.png')"
          size="20"
        />
      </template>
      <template #right>
        <router-link to="/remind">
          <van-icon
            name="/baking_log/FjmYGE5z6RvQL-_fdLKuSGYfmwO2.png"
            size="20"
            color="black"
          />
        </router-link>
      </template>
    </van-nav-bar>
    <div style="height: 46px"></div>
    <!-- 弹出层开始 -->
    <van-popup
      position="bottom"
      :style="{ height: '30%' }"
      v-model="popup"
      safe-area-inset-bottom
    >
      <van-grid clickable :column-num="2" :border="false" icon-size="100">
        <van-grid-item
          :icon="require('../assets/baking_log/upload.png')"
          text="上传食谱"
          to="/recipe"
        />
        <van-grid-item
          :icon="require('../assets/baking_log/issue.png')"
          text="发布作品"
          to="/edit"
        />
      </van-grid>
    </van-popup>
    <!-- 弹出层结束 -->

    <!-- 最新作品开始 -->
    <div>
      <van-row
        style="background-color: #fff"
        type="flex"
        justify="space-around"
      >
        <van-col span="6"
          ><van-image
            width="100"
            src="/baking_log/FrP8XrmbzlWDVkhfOpqhXwvBct5Q.png"
        /></van-col>
        <van-col span="6"
          ><van-image
            width="100"
            src="/baking_log/Fpg7quUnHNLTPN9PhBEJgxbXFgXh.png"
        /></van-col>
        <van-col span="6"
          ><van-image
            width="100"
            src="/baking_log/Fs12J5Iw3WgCATScrnEYgZnzLV_I.png"
        /></van-col>
      </van-row>

      <van-divider :style="{ borderColor: '#ccc', margin: '0' }"></van-divider>
      <!-- 可滚动话题开始 -->
      <van-tabs v-model="tab" offset-top="46px" sticky>
        <van-tab :title="topic[0]" v-if="data">
          <show-item
            v-for="(item, i) in data"
            :key="i"
            :item="item"
          ></show-item>
        </van-tab>
        <van-tab :title="topic[1]" v-if="data">
          <show-item
            v-for="(item, i) in data"
            :key="i"
            :item="item"
          ></show-item>
        </van-tab>
        <van-tab :title="topic[2]" v-if="data">
          <show-item
            v-for="(item, i) in data"
            :key="i"
            :item="item"
          ></show-item>
        </van-tab>
        <van-tab :title="topic[3]" v-if="data">
          <show-item
            v-for="(item, i) in data"
            :key="i"
            :item="item"
          ></show-item>
        </van-tab>
        <van-tab :title="topic[4]" v-if="data">
          <show-item
            v-for="(item, i) in data"
            :key="i"
            :item="item"
          ></show-item>
        </van-tab>
        <van-tab :title="topic[5]" v-if="data">
          <show-item
            v-for="(item, i) in data"
            :key="i"
            :item="item"
          ></show-item>
        </van-tab>
        <van-tab :title="topic[6]" v-if="data">
          <show-item
            v-for="(item, i) in data"
            :key="i"
            :item="item"
          ></show-item>
        </van-tab>
        <van-tab :title="topic[7]" v-if="data">
          <show-item
            v-for="(item, i) in data"
            :key="i"
            :item="item"
          ></show-item>
        </van-tab>
        <van-tab :title="topic[8]" v-if="data">
          <show-item
            v-for="(item, i) in data"
            :key="i"
            :item="item"
          ></show-item>
        </van-tab>
        <van-tab :title="topic[9]" v-if="data">
          <show-item
            v-for="(item, i) in data"
            :key="i"
            :item="item"
          ></show-item>
        </van-tab>
        <van-tab :title="topic[10]" v-if="data">
          <show-item
            v-for="(item, i) in data"
            :key="i"
            :item="item"
          ></show-item>
        </van-tab>
      </van-tabs>
      <!-- 可滚动话题结束 -->
    </div>

    <div style="height: 50px"></div>
    <!-- 最新作品结束 -->
  </div>
</template>

<script>
import ShowItem from "@/components/ShowItem.vue";
import { mapState } from "vuex";
export default {
  components: {
    ShowItem,
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  data() {
    return {
      topic: [
        "关注",
        "最新",
        "备战中秋",
        "夏季必做",
        "下午茶",
        "早餐",
        "午餐",
        "晚餐",
        "夜宵",
        "颜值控",
        "翻车记",
      ],
      tab: 1,
      popup: false,
      data: null,
    };
  },
  mounted() {
    this.getNew();
  },
  watch: {
    tab(to, from) {
      this.getWork();
    },
  },
  methods: {
    getNew() {
      let url = "new_work";
      this.axios.get(url).then((res) => {
        // console.log(res);
        this.data = res.data.data;
      });
    },
    getFocus() {
      if (this.userInfo) {
        let url = "focus_work";
        let params = `user_id=${this.userInfo.uid}`;
        this.axios.post(url, params).then((res) => {
          // console.log(res);
          this.data = res.data.data;
        });
      } else {
        this.$router.push("/login");
      }
    },
    getWork() {
      if (this.tab == 0) {
        this.getFocus();
      } else if (this.tab == 1) {
        this.getNew();
      } else {
        let url = `work?topic=${this.topic[this.tab]}`;
        this.axios.get(url).then((res) => {
          // console.log(res);
          this.data = res.data.data;
        });
      }
    },
    showPopup() {
      this.popup = true;
    },
  },
};
</script>

<style scoped>
:deep(.van-tabs__line) {
  bottom: 20px;
  /* width: 30px; */
  background-color: #ea9077;
}
</style>

<style lang="scss" scoped></style>
